<!--主页左侧菜单栏-->
<template>
  <div class="mSide">
    <el-row class="tac">
  <el-col :span="24">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      background-color="#fff"
      text-color="#131415"
      @select="handleSelect"
      active-text-color="#015CAC"
      router
    >
    <!--    -->
      <el-menu-item index="/home/main">
     <!-- this.$store.state.global.curMenuItem = this.item; -->
            <template slot="title">
          <svg-icon icon-class="home"></svg-icon>
         首页
        </template>

      </el-menu-item>
      <!-- <el-submenu index="/home/datasource">
          <template slot="title">
          <svg-icon icon-class="data"></svg-icon>
         数据源管理
        </template>
         <el-menu-item-group>
          <el-menu-item index="/home/administration">数据源管理</el-menu-item>
          <el-menu-item index="/home/dataSet">数据集管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu> -->
      <el-menu-item index="/home/project">
          <template slot="title">
          <svg-icon icon-class="engineering"></svg-icon>
         工程
        </template>
      </el-menu-item>
      <!-- <el-menu-item index="/home/modelManagement">
          <template slot="title">
          <svg-icon icon-class="model"></svg-icon>
         模型管理
        </template>
      </el-menu-item> -->
      <el-menu-item index="/home/components">
          <template slot="title">
          <svg-icon icon-class="component"></svg-icon>
         组件系统
        </template>
      </el-menu-item>
      <!-- <el-menu-item index="/home/journalManagement">
          <template slot="title">
         <svg-icon class="log_svg" icon-class="log"></svg-icon>
         日志管理
        </template>
      </el-menu-item> -->
    </el-menu>
  </el-col>
    </el-row>
    <!-- <ul class="msList">
      <template v-for="item in menuItems">
        <MenuBarItem v-bind:item="item" v-if="checkPermission(item.permission)"></MenuBarItem>
      </template>
    </ul> -->
  </div>
</template>
<style>
.el-menu-item .fa-fw {
  font-size: 18px;
}
</style>
<script>
import MenuBarItem from "./menu_bar/MenuBarItem.vue";
export default {
  name: "MenuBar",
  components: {
    MenuBarItem
  },
  data() {
    return {
      activeIndex: this.$route.path
    };
  },
  computed: {
    permission: function() {
      return this.$store.state.global.permission;
    },
    menuItems: function() {
      return this.$store.state.global.navMenu;
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$store.state.global.navMenu.forEach(item => {
        if (item.linkTo == key) {
          this.$store.state.global.curMenuItem = item;
        }
      });
    },
    checkPermission(permission) {
      if (this.$.inArray(permission, this.permission.data) > -1) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>
